<template>
	<view class="emoji-area" :style="{ height: `${height}rpx`, backgroundColor: backgroundColor }">
		<scroll-view scroll-y="true" :style="{ height: `${height}rpx` }">
			<view class="emotion-list" :class="{ 'emoji-area-has-safe-bottom': hasSafeBottom }" :style="{ padding: `0 ${padding}rpx` }">
				<view :hidden="!showHistory || history.length === 0"></view>
				<view class="emotion-head" style="margin-top: 8px;">所有表情</view>
				<view class="emotion-content">
					<block v-for="(item, index) in smileyList" :key="index">
						<view class="emotion-item" :data-idx="index" @tap="insertEmoji">
							<!--  -->
							<image class="icon-emotion" :src="staticFileDomain+'/static/smiley/' + item.fileName"></image>
						</view>
					</block>
				</view>
			</view>
		</scroll-view>
		<!-- <image class="emotion-delete" src="@/static/images/chat/icon-emotion-del.png" mode="aspectFit"></image> -->
	</view>
</template>

<script>
export default {
	props: {
		padding: {
			type: Number,
			default: 20
		},
		backgroundColor: {
			type: String,
			default: '#ddd'
		},
		showSend: {
			type: Boolean,
			default: true
		},
		showDel: {
			type: Boolean,
			default: true
		},
		showHistory: {
			type: Boolean,
			default: true
		},
		height: {
			type: Number,
			default: 300
		},
		source: {
			type: String,
			default: ''
		},
		smileyList: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	data() {
		return {
			hasSafeBottom: false,
			history: [],
			extraPadding: 0,
			perLine: 0,
			emotionSize: uni.upx2px(80)
		};
	},
	mounted() {
		const systemInfo = uni.getSystemInfoSync();
		const areaWidth = systemInfo.windowWidth;
		this.perLine = Math.floor((areaWidth - this.padding * 2) / 45);
		this.extraPadding = Math.floor((areaWidth - this.padding * 2 - this.perLine * this.emotionSize) / (this.perLine - 1));
	},
	methods: {
		insertEmoji(e) {
			const index = e.currentTarget.dataset.idx;
			console.log(this.smileyList[index])
			this.$emit('insert', this.smileyList[index]);
		}
	}
};
</script>

<style lang="scss">
.emojiarea {
	position: relative;
	width: 100%;
}
.emotion-list {
	padding: 0 10px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	width: 100%;
	height: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	white-space: normal;
	font-size: 0;
}
.emoji-area-has-safe-bottom {
	padding-bottom: 34px;
}
.emotion-head {
	margin: 28rpx 10rpx 16rpx;
	color: #000;
	font-size: 28rpx;
	text-align: left;
}
.emotion-content {
	width: 100%;
	position: relative;
	display: flex;
	flex-wrap: wrap;
}
.emotion-delete {
	position: absolute;
	bottom: 11.25rpx;
	right: 31.25rpx;
	height: 66.25rpx;
	width: 66.25rpx;
}
.emotion-item {
	position: relative;
	width: 88.75rpx;
	height: 88.75rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.icon-emotion {
	width: 66.25rpx;
	height: 66.25rpx;
}
</style>
